<template>
  <main>
    <dl-button>Test Button</dl-button> 
    <dl-button round>Round Button</dl-button>
    <dl-button circle>Ci</dl-button>
    <dl-button plain>Plain Button</dl-button>
    <dl-button disabled>Disabled  Button</dl-button>
    <br>
    <dl-button type="primary">Primary Button</dl-button>
    <dl-button type="success">Success Button</dl-button>
    <dl-button type="warning">Warning Button</dl-button>
    <dl-button type="info">Info Button</dl-button>
    <dl-button type="danger">Danger Button</dl-button>
    <br>
    <dl-button type="primary" plain>Primary Button</dl-button>
    <dl-button type="success" plain>Success Button</dl-button>
    <dl-button type="warning" plain>Warning Button</dl-button>
    <dl-button type="info" plain>Info Button</dl-button>
    <dl-button type="danger" plain>Danger Button</dl-button>
    <br>
    <dl-button type="primary" icon="fa-solid fa-user">Icon Button</dl-button>
    <dl-button type="success" loading>Loading Button</dl-button>
    <br>
    <dl-button  size="large">Large Button</dl-button>
    <dl-button  size="small">small Button</dl-button>
    <br>
    <div style="margin-top: 20px;">
      <dl-icon icon="fa-solid fa-user" size="2x" type="primary" />
      <dl-icon icon="fa-solid fa-user" size="2x" type="success" />
      <dl-icon icon="fa-solid fa-user" size="2x" type="danger" />
      <dl-icon icon="fa-solid fa-user" size="2x" type="warning" />
      <dl-icon icon="fa-solid fa-user" size="2x" type="info" />
      <dl-icon icon="fa-solid fa-user" size="2x" color="red" />
    </div>
  </main>
</template>

<script setup lang="ts">
import dlButton from './components/Button/Button.vue';
import dlIcon from './components/Icon/Icon.vue';
import { onMounted, ref } from 'vue';
import type {  ButtonInstance } from './components/Button/types'
const buttonRef = ref<ButtonInstance | null>(null);

onMounted(()=>{
  if(buttonRef.value){
    console.log(buttonRef.value.ref)
  }
})
</script>


<style>
button{
  margin-right: 10px;
  margin-top: 10px;
}
</style>